<template>
  <div class="box">
    <mt-header fixed title="登录注册"></mt-header>
    <div class="content loginContent">
      <mt-field :state = 'phoneStateF' label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
      <mt-field :state = 'passwordStateF' label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <div class="Lbtn">
        <mt-button @click = "goLogin" class="login" size="normal">登录</mt-button>
        <mt-button @click = "goRegister" class="register" size="normal">注册</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Field, Button, Header } from 'mint-ui'
Vue.use(Field, Button, Header)
export default{
  data () {
    return {
      password: 'aaaa',
      passwordState: '',
      phone: '18839129530',
      phoneState: ''
    }
  },
  computed: {
    phoneStateF () {
      const textphon = /^[1][3,4,5,7,8][0-9]{9}$/
      if (this.phone === '') {
        return ''
      } else {
        if (textphon.test(this.phone)) {
          return 'success'
        } else {
          return 'error'
        }
      }
    },
    passwordStateF () {
      const textpass = /^[a-zA-Z\d_]{4,}$/
      if (this.password === '') {
        return ''
      } else {
        if (textpass.test(this.password)) {
          return 'success'
        } else {
          return 'error'
        }
      }
    }
  },
  methods: {
    goLogin () {
      fetch(`/axiang/ap/api/login.php?username=${this.phone}&password=${this.password}`)
        .then(res => res.json())
        .then((data) => {
          console.log(data)
          sessionStorage.setItem('uid', data.data.id)
          if (data.code === 1) {
            this.$router.push('/user/login')
          }
        })
    },
    goRegister () {
      fetch(`/axiang/ap/api/reg.php?username=${this.phone}&password=${this.password}`)
        .then(res => res.json())
        .then((data) => {
          console.log(data)
          if (data.code === 1) {
            alert('注册成功请登录')
          }
        })
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.loginContent{
  margin-top: 0.44rem;
  .Lbtn{
    @include flexbox();
    @include justify-content();
    .mint-button{
      margin: 0.3rem 0.3rem;
      background-color: antiquewhite;
    }
  }
}
</style>
